<template>
    <div class="home-header">
        <el-container style="min-height: 100vh">
            <!-- 侧边栏  -->
            <Aside :is-collapse="isCollapse" :logo-text-show="logoTextShow" :side-width="sideWidth"
                   :bread-info="breadInfo" :tags="tags" :menus="menus"
                   @changeHighlightTag="changeHighlightTag"
            />
            
            <!-- 右边主体  -->
            <el-container style="display: flex">
                <!--    头部-->
                <el-header
                     style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 20px; display: flex; height: 92px;">
                    <Header :user="user" :collapse-btn-class="collapseBtnClass" @collapse="collapse"
                            :bread-info="breadInfo" :tags="tags"
                            :activeMenu.sync="activeMenu"
                            @handleClose="handleClose" @changeHighlightTag="changeHighlightTag"
                            @createHighlightTag="createHighlightTag"
                    />
                </el-header>
                
                <!--      内容区域-->
                <el-main>
                    <router-view style="flex: 1" @userInfo="refreshUser"/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import Header from "@/components/Header";
import Aside from "@/components/Aside";
import MainHeader from "@/components/MainHeader";
import request from "@/utils/request";

export default {
    name: "Index",
    des: "主页",
    components: {
        Header,
        Aside,
        MainHeader
    },
    data() {
        return {
            user: {},
            collapseBtnClass: 'el-icon-s-fold',
            isCollapse: false,
            sideWidth: 200,
            logoTextShow: true,
            currentPaths: ['系统管理'],
            //面包屑信息
            breadInfo: {
                'top': '',//顶级菜单信息
                'sub': '系统首页'//当前的菜单信息
            },
            //面包屑下的标签数据
            tags: [
                {
                    'name': '系统首页',
                    'url': '/',
                    'highlight': true
                }
            ],
            menus: {},
            //当前激活的菜单
            activeMenu: '',
        }
    },
    created() {
        this.refreshUser()
        let menusStr = sessionStorage.getItem("manage-menus") || "{}"
        this.menus = JSON.parse(menusStr)
    },
    watch: {
        //监察路径变化,改变菜单的高亮
        '$route.path': function (o, n) {
            this.activeMenu = o
            
            //如果没有该标签就创建改标签
            let flag = false
            //判断是否含有改标签
            this.tags.map(item => {
                if (item.url === this.activeMenu) {//如果有含有该标签
                    flag = true
                }
            })
            if (!flag) {//对应链接的标签不存在
                //先找到该标签的名字
                this.createHighlightTag()
            } else {//改标签存在,则高亮
                this.tags.map(item => {
                    //取消高亮别的标签
                    item.highlight = false
                    //高亮当前标签
                    if (item.url === this.activeMenu) {
                        item.highlight = true
                    }
                })
            }
        }
    },
    methods: {
        refreshUser() { // 当前登录用户刷新
            let userJson = sessionStorage.getItem("manage-user");
            if (!userJson) {
                return
            }
            let userId = JSON.parse(userJson).id
            // 从后台取出更新后的最新用户信息
            request.get("/user/" + userId).then(res => {
                this.user = res.data
            })
        },
        collapse() {  // 点击收缩按钮触发
            this.isCollapse = !this.isCollapse
            if (this.isCollapse) {  // 收缩
                this.sideWidth = 65
                this.collapseBtnClass = 'el-icon-s-unfold'
                this.logoTextShow = false
                
            } else {   // 展开
                this.sideWidth = 200
                this.collapseBtnClass = 'el-icon-s-fold'
                this.logoTextShow = true
            }
        },
        
        // ============================================== index =============================================
        
        //关闭tag标签
        handleClose(index) {//当前点击的tag的下标
            if (this.tags[index].highlight) {
                this.tags[index - 1].highlight = true
                //关闭之后,路由调跳转,高亮菜单和标签
                this.$router.push(this.tags[index - 1].url)
                this.handleSelect(this.tags[index - 1].url)
            }
            this.tags.splice(index, 1)
        },
        
        //菜单的高亮变化
        handleSelect(currentMenu) {
            this.activeMenu = currentMenu
        },
        
        //处理高亮的tag
        changeHighlightTag(curMenuName) {//当前需要高亮的名字
            let curMenu
            this.tags.map((item, i) => {
                if (item.name === curMenuName) curMenu = item
                item.highlight = item.name === curMenuName
            })
            //调用改变面包屑的方法
            this.changeTopBreakInfo(curMenu.name)
            this.$router.push(curMenu.url)
        },
        //改变头部的面包屑信息
        changeTopBreakInfo(subMenuName) {
            let topMenuName
            this.menus.map(item => {
                if (item.children !== undefined) {
                    item.children.map(i2 => {
                        if (i2.name === subMenuName) {
                            topMenuName = i2.parentName
                        }
                    })
                }
            })
            this.breadInfo.top = topMenuName
            this.breadInfo.sub = subMenuName
        },
        //创建当前高亮的tags
        createHighlightTag() {
            //根据链接创建不存在的tag标签并高亮
            let menuName
            this.menus.map(item => {
                if (item.submenu !== undefined) {
                    item.submenu.map(subItem => {
                        if (subItem.url === this.activeMenu) menuName = subItem.name
                    })
                }
            })
            if (menuName !== undefined && this.tags.indexOf(menuName) === -1) {
                this.tags.push({
                    'name': menuName,
                    'url': this.activeMenu,
                    'highlight': true
                })
                //高亮对应的标签
                this.tags.map(item => {
                    if (item.url === window.location.hash.substring(1)) this.changeHighlightTag(item.name)
                })
            }
        },
    }
}
</script>

<style scoped>
.home-header {
    background: url("../assets/home-bg2.jpeg") no-repeat center;
    background-size: cover;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
